<template>
	<view style="display: flex;flex-direction: column;align-items: center;width: 100vw;">
		<view class="statisitcWrapper">
			<view class="header">
				<view class="left">
					数据概览
				</view>
				<view class="right">
					<u-icon color="#888" size="25rpx" name="info-circle"></u-icon>
					<text style="color: #888;font-size: 22rpx;font-weight: normal;margin-left: 10rpx;">数据更新至昨日</text>			
				</view>
			</view>
			<view class="timeWrapper">
				<view class="item" :class="{itemEn: statisitcSelectDay == 0}" @click="onChangeSelectType(0)">
					昨天
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 1}" @click="onChangeSelectType(1)">
					本周
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 2}" @click="onChangeSelectType(2)">
					本月
				</view>
				<view class="item" :class="{itemEn: statisitcSelectDay == 3}" @click="onChangeSelectType(3)">
					近30天
				</view>
		
				<view class="refresh" @click="onRefresh">
					刷新
					<image class="icon" src="@/static/image/icon_refresh.png" mode=""></image>
				</view>
			</view>
			<view class="content">
				<view class="item">
					{{statisticObj.videoNum}}
					<text class="text">
						作品
					</text>
				</view>
				<view class="item">
					{{statisticObj.playNum}}
					<text class="text">
						播放数
					</text>
				</view>
				<view class="item">
					{{statisticObj.customerNumWithPhone}}
					<text class="text">
						留电数
					</text>
				</view>

			</view>
			<view class="content">
				<view class="item">
					{{statisticObj.commentNum}}
					<text class="text">
						评论数
					</text>
				</view>
				<view class="item">
					{{statisticObj.shareNum}}
					<text class="text">
						分享数
					</text>
				</view>
				<view class="item">
					{{statisticObj.likeNum}}
					<text class="text">
						点赞数
					</text>
				</view>
			</view>
			
		</view>
		<view v-if="pageObj.list.length>0" class="contentWrapper" >
			<view v-for="(item,index) in pageObj.list" class="item" @click="gotoVideoPlay(item)">
				<image class="left" :src="item.cover" mode=""></image>
					
				<view class="right">
					<view class="titleTop">
						测试
					</view>
					<view class="dataWrapper">
						<view class="dataItem">
							{{item.statistics.play_count}}
							<view class="text">
								播放
							</view>
						</view>
						<view class="dataItem">
							{{item.statistics.digg_count}}
							<view class="text">
								点赞
							</view>
						</view>
						<view class="dataItem">
							{{item.statistics.comment_count}}
							<view class="text">
								评论
							</view>
						</view>
						<view class="dataItem">
							{{item.statistics.share_count}}
							<view class="text">
								分享
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="pageObj.loadStatus" :fontSize="'24rpx'" />
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    
	export default {
		data() {
			return {
				statisitcSelectDay: 0,
				statisticObj:{
					commentNum: 0,
					likeNum: 0,
					shareNum: 0,
					videoNum: 0,
					customerNumWithPhone: 0,
					playNum: 0, 
				},
				pageObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
				},
			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
			this.clearListShow(this.pageObj)
            this.getTiktokVideoPage()
			this.getTiktokVideoStat()

        },
        onShow() {
      
        },
		onReachBottom() {
			this.getTiktokVideoPage();
		},
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
            onRefresh(){
				this.getTiktokVideoStat()
			},
			
			onChangeSelectType(index){
				this.statisitcSelectDay = index
				this.getTiktokVideoStat()
			},
			
			getDays(index){
				let date = new Date()
				let days = 0
				let day = date.getDate();
				let week = date.getDay();
				switch(index){
					case 0:
						//昨天
						days = 1
						break;
					case 1:
						//本周
						days = week - 1
						break;
					case 2:
						//本月
						days = day - 1
						break;
					case 3:
						//近30天
						days = 30
						break;
				}
				return -days
			},
			
            getTiktokVideoPage() {
                let that = this
				if (that.pageObj.curPageIndex != that.pageObj.pageIndex) {
					that.pageObj.curPageIndex = that.pageObj.pageIndex;		
	
					api.getTiktokVideoPage({
						param: {
							limit: 20,
							page: that.pageObj.pageIndex,
						}
					}).then(res => {
						console.log("getTiktokVideoPage:",res)
						if (res.code == 0) {
							var list = []
							for (var i in res.data){
								if (res.data[i].share_url&&res.data[i].share_url.length>0){
									list.push(res.data[i])
								}					
							}
							that.pushListShow(that.pageObj, list);
						}
					})
				}
            },
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						// pushlist[i].createTime = utils.formatTime(
						// 	pushlist[i].createTime,
						// 	"yyyy-MM-dd"
						// );
						srcObj.list.push(pushlist[i]);
					}
					srcObj.pageIndex++;
			
					if (pushlist.length == 20) {
						srcObj.loadStatus = "loadmore";
					} else {
						srcObj.loadStatus = "nomore";
					}
				} else {
					srcObj.loadStatus = "nomore";
				}
			},
			
			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length);
			},
			
			getTiktokVideoStat() {
			    let that = this
			    let period = that.getDays(that.statisitcSelectDay) 
			    if (period<0){	
					uni.showLoading({
						title: '正在加载...'
					});
					api.getTiktokVideoStat({
						param: {
							period: period,
						}
					}).then(res => {
						console.log("getTiktokVideoStat:",res)
						if (res.success) { 
							that.statisticObj.commentNum = res.data.commentNum
							that.statisticObj.likeNum = res.data.likeNum
							that.statisticObj.shareNum = res.data.shareNum
							that.statisticObj.videoNum = res.data.videoNum
							that.statisticObj.customerNumWithPhone = res.data.customerNumWithPhone
							that.statisticObj.playNum = res.data.playNum
						}
					}).finally(()=>{
						uni.hideLoading();
					})
				}else{
					that.statisticObj.commentNum = res.data.commentNum
					that.statisticObj.likeNum = res.data.likeNum
					that.statisticObj.shareNum = res.data.shareNum
					that.statisticObj.videoNum = res.data.videoNum
					that.statisticObj.customerNumWithPhone = res.data.customerNumWithPhone
					that.statisticObj.playNum = res.data.playNum
				}
			},
			gotoVideoPlay(item){
				uni.navigateTo({
					url: "./tiktokWeb?webUrl=" + encodeURIComponent(item.share_url) 
				})
			}
        }
	}
</script>

<style>
	page{
		background-color: #f3f3f3;
	}
</style>


<style lang="scss">
	.statisitcWrapper {
		padding: 30rpx 40rpx;
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;

		.header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 24rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #3e3a39;
			}

			.right {
				font-size: 24rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #666;
				display: flex;
			}
		}

		.content {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 50rpx;
			margin-bottom: 10rpx;

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 50rpx;
				color: #5E9FFD;
				font-weight: bold;
				width: 220rpx;
				.text {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #888;
					font-weight: normal;
				}
			}
		}
	}
	
	.timeWrapper {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 30rpx;
	
		.refresh {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			margin-left: 60rpx;
	
			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
	
		.item {
			padding: 0 20rpx;
			height: 45rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
			background: #F3F1F3;
			font-size: 24rpx;
			color: #999999;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
	
			.iconRange {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
				background-image: url(@/static/image/icon_time_range.png);
			}
		}
	
		.itemEn {
			background: #5E9FFD;
			color: #FFFFFF;
		}
	}
	
	.contentWrapper{
		padding: 30rpx 40rpx 0 40rpx;
		width: 708rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		.item{
			display: flex;
			align-items: center;
			width: 100%;
			height: 160rpx;
			margin-bottom: 50rpx;
			.left{
				width: 130rpx;
				height: 100%;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
			.right{
				width: 500rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #222;
				padding: 10rpx 0;
				.titleTop{
					font-size: 28rpx;
					font-weight: bold;
					line-height: 40rpx;
				}
				.dataWrapper{
					display: flex;
					align-items: center;
					.dataItem{
						line-height: 30rpx;
						font-size: 26rpx;
						width: 110rpx;
						.text{
							font-size: 20rpx;
							margin-top: 10rpx;
							color: #888;
						}
					}							
				}
			}
		}
	}
</style>
